<template>
    <div>
        <el-card style="margin: 0px 0px 20px; padding: 20px 0px;" shadow="always">
            <CategorySelect @getCategoryId="getCategoryId" :isShow="!scene==0"></CategorySelect>
        </el-card>
        <el-card style="border: 1px solid #eee;" :shadow="scene==0?'never':'always'">
            <!-- 默认展示spu的列表 -->
            <div v-show="scene==0">
                <!-- 添加spu按钮 -->
                <el-button type="primary" icon="el-icon-plus" :disabled="!category3Id"
                    style="margin-bottom: 20px; width: 120px;" @click="addSpu">添加SPU</el-button>
                <!-- spu列表 -->
                <el-table :data="spuList" stripe border empty-text="暂无数据" width="100%">
                    <el-table-column type="index" label="序号" width="120" align="center"></el-table-column>
                    <el-table-column prop="spuName" label="SPU名称" width="width" align="center"></el-table-column>
                    <el-table-column prop="description" label="SPU描述" width="width" align="center"></el-table-column>
                    <el-table-column prop="prop" label="操作" width="400" align="center">
                        <template slot-scope="{row,$index}">
                            <el-tooltip content="添加SKU" placement="bottom" :open-delay="600">
                                <el-button type="success" icon="el-icon-plus" size="small" @click="addSku(row)">
                                </el-button>
                            </el-tooltip>
                            <el-tooltip content="SKU列表" placement="bottom" :open-delay="600">
                                <el-button type="info" icon="el-icon-info" size="small" @click="lookSkuList(row)">
                                </el-button>
                            </el-tooltip>
                            <el-tooltip content="编辑" placement="bottom" :open-delay="600">
                                <el-button type="primary" icon="el-icon-edit" size="small" @click="editSpu(row)">
                                </el-button>
                            </el-tooltip>
                            <el-tooltip content="删除" placement="bottom" :open-delay="600">
                                <el-popconfirm :title="`确定删除${row.spuName}吗？`" @onConfirm="deleteSpu(row)">
                                    <el-button style="margin-left: 10px;" slot="reference" type="danger"
                                        icon="el-icon-delete" size="small"></el-button>
                                </el-popconfirm>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <!-- 
                    current-page: 当前是第几页
                    total: 一共有多少条数据需要展示
                    page-size: 每一页需要展示多少条数据
                    page-sizes: 设置每一页展示多少条数据
                    pager-count: 连续的页码数
                    layout: 设置分页器的布局| -> : 代表将箭头后的元素移动至页面最右端
                -->
                <el-pagination v-show="spuList.length>0" background style="margin-top: 30px; text-align: center;"
                    :current-page="page" :total="total" :page-size="limit" :page-sizes="[6,9,12]" :pager-count="7"
                    layout="prev,pager,next,jumper,->,sizes,total" @current-change="handleCurrentChange"
                    @size-change="handleSizeChange" @prev-click="handlePrevClick" @next-click="handleNextClick">
                </el-pagination>
            </div>
            <!-- 添加/修改spu -->
            <SpuForm v-show="scene==1" @spuChangeScene="spuChangeScene" ref="spu"></SpuForm>
            <!-- 添加sku -->
            <SkuForm v-show="scene==2" @skuChangeScene="skuChangeScene" ref="sku"></SkuForm>
        </el-card>

        <!-- SKU对话框 -->
        <el-dialog :title="`${spuName}  的SKU列表`" :visible.sync="skuDialogVisible" @close="closeSkuDialog">
            <el-table :data="skuList" max-height="700" empty-text="暂无数据" v-loading="loading"
                element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(255, 255, 255, 0.8)">
                <el-table-column type="index" label="序号" width="80px" align="center"></el-table-column>
                <el-table-column prop="prop" label="默认图片" width="200" align="center">
                    <template slot-scope="{row,$index}">
                        <img :src="row.skuDefaultImg" :alt="row.skuName" style="width: 100px;height: 100px;">
                    </template>
                </el-table-column>
                <el-table-column prop="skuName" label="名称" width="width"></el-table-column>
                <el-table-column prop="price" label="价格" width="200" align="center"></el-table-column>
                <el-table-column prop="weight" label="重量" width="200" align="center"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
    import SpuForm from './SpuForm/index'
    import SkuForm from './SkuForm/index'
    export default {
        name: "Spu",
        components: {
            SpuForm,
            SkuForm
        },
        data() {
            return {
                category1Id: '', // 一级分类id
                category2Id: '', // 二级分类id
                category3Id: '', // 三级分类id
                spuList: [], // spu列表
                page: 1,  // 当前页码
                limit: 6, // 一页展示多少条数据
                total: 0, // 一共有多少条数据
                scene: 0, // 页面下半部分的状态  0：spu列表数据，默认状态  ||  1：添加/修改spu，点击添加/修改spu按钮  ||  2：添加sku，点击添加sku按钮
                skuDialogVisible: false, // 是否显示sku列表对话框
                skuList: [], // sku列表
                spuName: '', // spu名称
                loading: false, // sku列表加载动画
            }
        },
        methods: {
            // 通过自定义事件获取子组件的id
            getCategoryId({ categoryId, level }) {
                if (level == 1) { // 一级分类id
                    this.category1Id = categoryId
                    // 一级分类切换时清空二，三级分类id和spu列表的数据
                    this.category2Id = ''
                    this.category3Id = ''
                    this.spuList = []
                } else if (level == 2) { // 二级分类id
                    this.category2Id = categoryId
                    // 二级分类切换时清空三级分类id和spu列表的数据
                    this.category3Id = ''
                    this.spuList = []
                } else { // 三级分类
                    this.category3Id = categoryId
                    this.getSpuList() // 发送请求获取spu列表的数据
                }
            },
            // 获取spu列表数据
            async getSpuList() {
                const { page, limit, category3Id } = this
                const result = await this.$api.spu.reqGetSpuList(page, limit, category3Id)
                if (result.code == 200) {
                    this.total = result.data.total
                    this.spuList = result.data.records
                }
            },
            // 分页器相关方法
            // #region 
            // 切换页页码时触发 回调参数：当前页码
            handleCurrentChange(page) {
                this.page = page
                this.getSpuList()
            },
            // 切换页面显示数据条数时触发  回调参数：每页条数
            handleSizeChange(limit) {
                this.limit = limit
                this.getSpuList()
            },
            // 点击上一页时触发  回调参数：当前页码
            handlePrevClick(page) {
                this.page = page
                this.getSpuList()
            },
            // 点击下一页时触发  回调参数：当前页码
            handleNextClick(page) {
                this.page = page
                this.getSpuList()
            },
            // #endregion

            // 添加spu
            addSpu() {
                // this.$refs.spu.spuForm = {} // 清空spuForm的数据
                this.scene = 1 // 页面下半部分的状态
                this.isShow = false // 禁用三级联动

                // 点击添加spu时会发送这两个请求
                this.$refs.spu.getTrademarkList(this.category3Id) // 发送请求获取品牌列表数据
                this.$refs.spu.getSaleAttrLsit() // 发送请求获取销售属性列表数据
            },
            // 修改spu
            editSpu(row) {
                this.scene = 1 // 页面下半部分的状态
                this.isShow = false // 禁用三级联动
                // 通过$ref获取子组件的方法通知子组件发请求
                this.$refs.spu.initSpuData(row)
            },
            // 关闭Spu表单 | 切换页面下半部分的状态
            spuChangeScene({ scene, flag }) { // 通过自定义事件接受子组件传过来的参数
                this.scene = scene // 页面下半部分的状态|0
                if (flag == '添加') { // flag:如果是添加spu则会跳转到第一页，修改则停在当前页
                    this.page = 1
                }
                this.getSpuList() // 获取spu列表
            },
            // 删除spu
            async deleteSpu(row) {
                const result = await this.$api.spu.reqDeleteSpu(row.id)
                if (result.code == 200) {
                    this.$message({
                        type: 'success',
                        message: "删除成功！"
                    })
                    // 当前分页展示的数据小于2条时，在重新获取spu列表前将当前页码改为前一页，防止出现展示当前页面显示数据为空的情况
                    if (this.spuList.length < 2) {
                        this.page--
                    }
                    this.getSpuList()
                } else {
                    this.$message.error('删除失败！');
                }
            },
            // 添加sku
            addSku(row) {
                this.scene = 2 // 切换页面状态为sku
                // 通过$ref获取子组件的方法通知子组件发请求
                this.$refs.sku.initSkuData(this.category1Id, this.category2Id, this.category3Id, row)
            },
            // 关闭Sku表单
            skuChangeScene(scene) {
                this.scene = scene // 页面下半部分的状态|0
            },
            // 查看sku列表
            async lookSkuList(row) {
                this.skuDialogVisible = true // 显示sku列表对话框
                this.spuName = row.spuName // 收集当前spu名称
                this.loading = true // 开启加载动画
                // 发送请求获取sku列表数据
                const result = await this.$api.spu.reqGetSkuList(row.id)
                if (result.code == 200) {
                    this.skuList = result.data
                    this.loading = false // 关闭加载动画
                }
            },
            // 关闭sku列表对话框的回调
            closeSkuDialog() {
                // 清空sku列表数据防止loading效果只展示一次的问题
                this.skuList = []
            }
        },
    }
</script>
<style>
    .el-icon-loading {
        font-size: 24px;
    }
</style>